<template>
	<div id="list">
		<hr />
		<div class="zhong">
			<el-button type="primary" @click="addApply" style='margin-left:66px;' icon="el-icon-circle-plus-outline">创建应用</el-button>
			<ul style="list-style:none;font-size:14px;" >	
				<!--后面的应用列表数据！-->
				<li class="sty1" v-for="(site,index) in sites">
						<div class="shang">
							<div class="zuo">
								<img  :src="site.imgSrc" class="image"/>
							</div>
							<div class="you">
								<div style="font-weight:bolder;color:#009982;font-size:16px"><span>{{site.name}}</span>
									<div v-if="site.status == 1" style="color:#ccc;">已授权</div>
									<div v-if="site.status == 0" style="color: #c10730;" >未授权</div>
								</div>
							</div>
						</div>
						<div style="width:100%;float:left;margin-top:20px;text-align:center;margin-bottom:20px;">
							<el-button type="primary"  v-if="site.status == 0"   @click="successMsg(site.id)">应用授权</el-button>
							<el-button type="primary"   v-if="site.status == 1"   @click="manage(site,index)">应用管理</el-button>
							<el-button type="primary" v-if="site.status == 0"   @click="editApplication(site,index)">编辑应用</el-button>
							<el-button type="primary" disabled v-if="site.status == 1" >编辑应用</el-button>
							<el-button type="danger" v-if="site.status == 0"  @click="openBox(site)">删除应用</el-button>
							<el-button type="danger" disabled  v-if="site.status == 1" >删除应用</el-button>
						</div>
				 </li>
			</ul>
		</div>
			<!--分页-->
		<div class="di">
			<div class="di_foot" style="text-align: center;">
				<el-pagination
					background
					layout="prev, pager, next" 
					@current-change="handleCurrentChange" 
					:total="total" 
				>
				</el-pagination>
			</div>
		</div>
</div>
</template>
<script>

import $ from 'jquery'
import { applyList, deleteApplication,checkLogin,addImpower,delApplyImpower,getViewUrl } from '../../api/api.js';
export default{
	name:'list',
	data(){
		return{
			sites:[],
			pageNumber:1,
			pageSize:10,
			total:0,
			listLoading:false,
			id:'',
		}
	},
	created:function () {
	},
	watch:{
		sites:function(){
			this.$nextTick(function(){
				console.log($(".sty1").height());
				$(".sty2").height($(".sty1").height());
				$('.sty2').show();
			});
		}
	},
	methods:{
		//获取用户列表
		getUsers() {
			let para = {
				pageNumber: this.pageNumber,
				pageSize: this.pageSize,
			};
			console.log(para);
			this.listLoading = false;
			applyList(para).then((res) => {
				console.log('res.list...',res.list);
				this.sites = res.list;
				for(var i=0;i<this.sites.length; i++){
					var site = this.sites[i];
					if(site.logoUrl==null || site.logoUrl==""){
						site.imgSrc = "static/img/apply/gw_logo.png";
					}else{
						site.imgSrc = site.logoUrl;
					}
				}
				this.total = res.count;
				this.listLoading = false;
			});
		},
		//应用授权
		successMsg(id) {
			let para ={
				id:id
			}
			console.log("授权id",para);
			addImpower(para).then((res)=>{
				console.log('传来的数据,,,,',this.Unauthorized);
				if(res.code ==='0000'){
					 this.$message({
			          message: '授权成功！',
			          type: 'success'
			        });
			        this.getUsers();
				}else if(res.code =='2003'){
					 this.$message({
			          message: '不能重复授权！',
			          type: 'error'
			        });					
				}else{
					 this.$message({
			          message: '授权失败！',
			          type: 'error'
			        });
				}
			});
      	},
    openBox(site) {
    	this.id = site.id;
    	console.log('删除ID。。。。',this.id);
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
        	let para = {
				id: this.id
			};
			console.log('删除ID。。。。',this.id);
        	deleteApplication(para).then((res) =>{
        		console.log(res.message)
        		if(res.code == '0000'){
        			this.$message({
			            type: 'success',
			            message: '删除成功!'
			        });
			        this.getUsers();
        		}else if (res.code == '2002'){
        			this.$message({
			            type: 'error',
			            message: '应用名称不存在!'
			        });
        		}else{
        			this.$message({
			            type: 'error',
			            message: '删除失败!'
			        });        			
        		}
        	});
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
      //分页处理函数
      handleCurrentChange(val) {
			this.pageNumber = val;
			this.getUsers();
	  },
		onSubmit(formName){
			this.$refs[formName].validate((valid) => {
				if (valid) {
					this.getUsers();
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},
		addApply (){
			this.$router.push('/apply/add2');
		},
//		应用管理
		manage (site,index){
			if(site.status === 1){
				sessionStorage.setItem('Authorized', JSON.stringify(site));
				this.$router.push('/apply/addAdmin');
			}else{
				sessionStorage.setItem('Unauthorized', JSON.stringify(site));
				this.$router.push('/apply/addImpower');
			}
		},
//		编辑应用
		editApplication (site,index) {
			console.log(site);
			console.log(index);
			sessionStorage.setItem('ApplicationEditor', JSON.stringify(site));
			this.$router.push('/apply/addEdit');
		},
//		删除应用
		deldata:function(site){
			console.log('rrrrr',site.id);
			let para = {
				id: site.id
			};
        	deleteApplication(para).then((res) =>{
	        	this.$message({
		            type: 'success',
		            message: '删除成功!'
	          	});
        	}) 
		}
	},
	mounted(){
		if(checkLogin(this)){
			this.getUsers();
		}
	}
}
</script>

<style scoped>
	.zhong{ width:100%; overflow: hidden;}
	.sou{width:90%; margin: 0 auto; margin-top:30px;font-weight:bolder;font-size:18px;}
	.zhong li{
		float: left;
		width: 30%;
		margin-left:2%;
		border: 1px solid #ccc;
		margin-top: 10px;
		margin-bottom: 50px;
		border-radius:5px;
		-webkit-transition: all .5s;
	}
	.zhong li:hover{
		box-shadow:2px 2px 5px 5px #ccc;
		 -webkit-transition: all .5s;
	}
	.zhong .shang{
		overflow: hidden;
	}
	.image{ width:150px;height:100px;padding:5px;display:block;border-radius:7%;}
	.zhong .shang .zuo{ width:35%;float:left}
	.zhong .shang .you{ width:60%;float:right;line-height: 30px;}
	.image1{ width:100%;height:100%;}

</style>